<script lang="ts" setup>
import { computed } from 'vue';

interface Props {
	type?: string;
	size?: number;
	direction?: string;
	textProps?: any;
}

const props = withDefaults(defineProps<Props>(), {
	size: 80,
	direction: 'vertical'
});

const iconStyle = computed(() => {
	return {
		width: props.size + 'rpx',
		height: props.size + 'rpx'
	};
});

const classNames = computed(() => {
	const list = ['x-text-icon', `x-text-icon-${props.direction}`];
	return list;
});
</script>

<template>
	<view :class="classNames">
		<view class="icon" :style="iconStyle">
			<x-image :src="`/icon/${type}.png`" width="100%" height="100%" prefix></x-image>
		</view>
		<x-text color="#222222" :size="24" v-bind="textProps">
			<slot></slot>
		</x-text>
	</view>
</template>

<style lang="scss" scoped>
.x-text-icon {
	display: flex;
	align-items: center;
	gap: 10rpx;

	&-horizontal {
	}

	&-vertical {
		flex-direction: column;
	}

	.icon {
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
</style>
